<template>
  <div>
    <div class="number">
      <div class="number-left">联系手机号：</div>
      <up-input
        v-model="phoneNumber"
        placeholder="请输入手机号"
        @change="validatePhoneNumber"
        class="input-field"
      />
      <up-button
        v-if="isShow"
        class="button"
        @tap="handleClick"
        :disabled="isDisabled"
        :text="tips"
        type="primary"
        size="normal"
      ></up-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
const baseUrl = "/api";
const isShow = ref(false);
// 绑定手机号的输入

const phoneNumber = defineModel();

// 按钮文字初始为"获取验证码"
const tips = ref("获取验证码");

// 按钮是否禁用
const isDisabled = ref(false);

// 倒计时初始值为60秒
const countdown = ref(60);

function getToken() {
  let token = uni.getStorageSync("token");
  return token;
}

// 验证手机号格式
const validatePhoneNumber = () => {
  const phoneRegex = /^1[3-9]\d{9}$/; // 简单验证手机号格式
  return phoneRegex.test(phoneNumber.value);
};

// 点击按钮后的逻辑
const handleClick = () => {
  const isValidPhone = validatePhoneNumber();
  if (!isValidPhone) {
    uni.$u.toast("请输入正确的手机号");
  } else {
    getCode(); // 合法手机号，获取验证码
  }
};
onLoad(() => {
  let token = getToken();
  if (!token) {
    isShow.value = true;
  }
});

// 模拟获取验证码的函数
const getCode = () => {
  if (!isDisabled.value) {
    // 模拟请求过程
    uni.showLoading({
      title: "正在获取验证码",
    });

    setTimeout(() => {
      uni.hideLoading(); // 隐藏加载提示
      // 提示发送成功

      // 发送接口请求获取代码
      uni.request({
        url: baseUrl + "/user/sms/send", // 仅为示例，并非真实接口地址。
        method: "post",
        data: {
          phone_number: phoneNumber.value,
        },
        success: (res) => {
          if (res.data.code == 200) {
            isDisabled.value = true; // 按钮禁用
            tips.value = "发送中..."; // 按钮显示"发送中..."
            startCountdown();
          } else {
            uni.$u.toast(res.data.message);
          }
          // resultData.value = res.data.data
          // this.text = 'request success';
          // arr.value = res.data
        },
      });
      // 开始倒计时
    }, 2000); // 模拟请求延迟2秒
  }
};

// 开始倒计时逻辑
const startCountdown = () => {
  let timer = countdown.value;
  const interval = setInterval(() => {
    if (timer > 0) {
      tips.value = `${timer}秒后重新获取`; // 更新按钮文字
      timer--;
    } else {
      clearInterval(interval); // 清除倒计时
      tips.value = "获取验证码"; // 恢复按钮文字
      isDisabled.value = false; // 按钮恢复可点击状态
    }
  }, 1000);
};
</script>

<style scoped>
.number {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.number-left {
  margin-left: 1rem;
  font-size: 1rem;
  white-space: nowrap;
  /* 防止文字换行 */
  /* margin-right: 0.5rem; */
  /* 文字与输入框之间的间距 */
}

.input-field {
  width: 10rem;
  /* 调整输入框宽度 */
  height: 1.4rem;
  /* 调整输入框高度 */
  padding: 0.2rem;
  border: 2px solid #000;
  /* 黑色边框，边框宽度为2px */
  border-radius: 0;
  /* 方形边框，无圆角 */
  font-size: 0.9rem;
  margin-right: 0.5rem;
  /* 输入框与按钮之间的间距 */
}

.button {
  height: 2rem;
  width: 6rem;
  /* 增加按钮宽度 */
  background-color: deepskyblue;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0 1rem;
}

.button:disabled {
  background-color: gray;
  color: white;
}
</style>
